<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<!-- 引入基础的css和js -->
<!-- <link rel="import" href="/public/import.html" id="import"> -->

</head>
<body>
<div id="app_dialog" class="content-div">
    <!-- 列表显示区间 start -->
	<div>
	     <!-- 查询块 start -->
	     <div >
		   	 <div class="panel panel-default">
		        <div >
		            <form id="formSearch" class="form-horizontal">
		               <div class="form-group" >
		                    <div class="col-sm-3">
		                    	<div class="input-group">
		                    		<div class="input-group-btn">
										<button class="btn btn-white" type="button">角色名称</button>
									</div>
				                        <input type="text" class="form-control" v-model="search.roleName" 
				                        onkeyup="this.value=this.value.trim()"/>
		                    	</div>
		                    </div>
		                    <div class="col-sm-3" style="text-align:left;">
		                        <button type="button" style="margin-left:10px" id="btn_query" class="btn btn-primary" @click="reload">查询</button>
		                    </div>
		                </div>
		            </form>
		        </div>
		    </div>
	    </div>
	    <!-- 查询块 end -->   
	    <!-- 列表table显示 start -->
	    <table id="table_dialog"></table>
	    <!-- 列表table显示end -->
	</div>
    <!-- 列表显示区间 end -->
</div>
<script>

var vm_dialog = new Vue({
	el:'#app_dialog',
	data:{
		 search:{
			 roleName:""
		 }
	},
	methods: {
		reload: function () {
			$('#table_dialog').bootstrapTable('refresh'); 
		}
	}
});

$(function() {
	var $table_dialog = $('#table_dialog').bootstrapTable({
		url: '../sys/sysrole/list',
		height: 450,
		//toolbar: '#toolbar',                //工具按钮用哪个容器
		striped: true,                      //奇偶行渐色表  
		search: false,
		searchOnEnterKey: false,
		showRefresh: true,
		showToggle: true,                   //是否显示刷新按钮
		showColumns: true,                   //是否显示所有的列
		pageNumber:1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                      //每页的记录行数（*）
        pageList: [10, 25, 50, 100 , 500],  //可供选择的每页的行数（*）
        queryParamsType:'',                   //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
        //查询参数,每次调用是会带上这个参数，可自定义                         
        queryParams : function(params) {            
            return {
            	  page: params.pageNumber,
            	  limit: params.pageSize,
            	  sidx:params.sortName,
                  order: params.sortOrder,
                  roleName:vm_dialog.search.roleName,              //查询字段
                  status:2
                };
        },
		responseHandler:responseHandler_dialog, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!! 
		minimumCountColumns: 2,
		showPaginationSwitch: true,      //是否开启分页
		clickToSelect: true,             //是否选中  
		detailView: false,
		detailFormatter: 'detailFormatter',
		pagination: true,                //显示分页  
		paginationLoop: false,
		classes: 'table table-hover ',
		sidePagination: 'server',
		//silentSort: false,
		smartDisplay: false,
		uniqueId: "id",
		idField:  'id',
		sortName: 'role_id',
		sortOrder: 'desc',
		singleSelect:false,          //单选true ： 多选改为false
		escape: true,
		maintainSelected: true,
		//toolbar: '#toolbar',
		showExport: true,                     //是否显示导出
        exportDataType: "selected",           //basic', 'all', 'selected'. 
        exportTypes:['excel','txt'],         //导出文件类型
        exportOptions:{  
        	ignoreColumn: [0],             //忽略某一列的索引  
            fileName: 'advertiser',                 //文件名称设置  
            worksheetName: 'sheet1',          //表格工作区名称  
            tableName: 'test',  
           // excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],  
           //onMsoNumberFormat: DoOnMsoNumberFormat  
        },
  
		columns: [
					{field: 'state', checkbox: true},
					{field: 'roleName' , title: '角色名称', sortName:'role_name' , sortable: true,halign: 'center',align: 'center'},
					{field: 'remark' , title: '备注', sortName:'remark' , sortable: true,halign: 'center',align: 'center'},
					{field: 'creator.username' , title: '创建者', sortName:'create_user_id' , sortable: true,halign: 'center',align: 'center'},
					{field: 'createTime' , title: '创建时间', sortName:'create_time' , sortable: true,halign: 'center',align: 'center'},
			    	//{field: 'action', title: '操作', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false, width: 150, halign: 'center', align: 'center'}
		         ]
	}).on('all.bs.table', function (e, name, args) {
		$('[data-toggle="tooltip"]').tooltip();
		$('[data-toggle="popover"]').popover();  
	});
	
	//表格分页之前处理多选框数据  
	function responseHandler_dialog(res) {
		console.log(res.page.list);
		$.each(res.page.list, function (i, row) {  
	          row.state = $.inArray(row.roleId, selectedIds) != -1;  //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true  
	      });
	     	return {
	          "total": res.page.totalCount,//总数
	          "rows":  res.page.list   //数据
	       };
	}
	
	
});








</script>
</body>
</html>